<template>
    <el-form :model="form" label-width="80px" class="demo-ruleForm">

        <el-form-item label="上级菜单">
            <va-cascader
                    :remoteLoading="loadChoosableMenu"
                    label="name"
                    value="id"
                    v-model="menuObj"
                    @change="selectParent"
            />
            <va-select dictKey="q" >

            </va-select>
        </el-form-item>
        <el-form-item label="名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
            <el-input v-model="form.path"></el-input>
        </el-form-item>
        <el-form-item label="图标">
            <va-iconSelect v-model="form.icon"></va-iconSelect>
        </el-form-item>
        <el-form-item label="排序编码">
            <el-input-number v-model="form.sortNo"
                             controls-position="right"
                             :min="1"
                             :max="10"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import {reactive, getCurrentInstance} from 'vue'
    import {mapActions} from 'vuex';
    import {objIntersectionAssignExclude} from '@/util/util';


    export default {
        name: "create",
        methods:{
            //从store中注册方法
            ...mapActions('menu', [
                'loadChoosableMenu'
            ])
        },
        setup() {

            const {proxy} = getCurrentInstance()

            //DATA
            const form = reactive(
                {
                    name: null,
                    path: null,
                    icon: null,
                    sortNo: 0,

                }
            )

            const menuObj = reactive(null)


            /**
             * 选择父级菜单事件
             */
            const selectParent = (value) => {
                objIntersectionAssignExclude(form, value, "name");
            }

            /**
             * 提交请求
             */
            const onSubmit = () => {

                proxy.$store.dispatch('menu/create', form)
                    .then(() => {
                        proxy.$msg.success("ok")
                    }).catch((err) => {
                    proxy.$msg.error(err)
                })
            }


            return {
                //data
                form,
                menuObj,
                //fun
                onSubmit,
                selectParent,

            }
        }
    }
</script>

<style scoped>

</style>